import { useDispatch, useSelector } from "react-redux"
import { useCommonFunc } from "./hooks/useCommon";
import {MainRouter} from "./pages/router"
import { useEffect } from 'react';
import { changePaddingTop, data_top } from "./rtk/reducers/dataSlice";
import { useLocation } from "react-router-dom";


function App() {
  const { pathname } = useLocation()
  const top = useSelector(data_top)
  const { hasUrl } = useCommonFunc()
  const dispatch = useDispatch()
  
    // 全局rtk 通信 
    useEffect(()=>{
      if ( hasUrl('/404') || hasUrl('/503')  ) {
        dispatch(changePaddingTop(0))
      } else {
        dispatch(changePaddingTop(45))
      }
    },[pathname])

  return (
    <div className='app' style={{ paddingTop: top   }} >
      <MainRouter />
    </div>
  )
}

export default App
